<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.js"></script>
</head>

<body>
  <button class="btn1">发送多个axios请求</button>
  <button class="btn2">发送延迟请求</button>
  <button class="btn3">取消axios请求</button>
  <script>
    // 一、发送多个axios请求 ： 同时发送多个axios请求，不是依次 。类似 Promise.all([p1,p2,p3]);
    let btn1 = document.querySelector(".btn1");
    btn1.onclick = function () {
      // axios.get("/getdata").then(res => {
      //   console.log(res);
      // })
      // axios.post("/postdata").then(res => {
      //   console.log(res);
      // })
      axios.all([axios.get("/getdata"), axios.post("/postdata")]).then(res => {
        console.log(res);
      })
    }

    // 二、取消axios请求
    let btn2 = document.querySelector(".btn2");
    // 定义一个全局变量来存储取消axios的函数
    let cancel;
    btn2.onclick = async function () {
      if (cancel) {
        cancel();  // 取消上一个axios请求
      }
      try {
        let { data } = await axios.get("/timedata", {
          cancelToken: new axios.CancelToken(function (c) {
            // cancel 就是取消axios的函数，执行这个cancel函数就可以取消axios
            // cancel()
            cancel = c;
          })
        })
        console.log(data);
      } catch (err) {
        console.log("??", err);
        // axios 提供一个 isCancel 来判断错误  是否是一个取消axios的错误
        console.log(axios.isCancel(err));  // 如果是一个取消axios的错误 那么就返还true，否则就返还false
        if (axios.isCancel(err)) {
          console.log("axios被手动取消了！！");
        }
      }
    }

    // 取消axios请求
    let btn3 = document.querySelector(".btn3");
    btn3.onclick = function () {
      cancel(); // 取消axios请求
    }

    /*
    一、axios 可以同时执行多个 axios请求
    二、取消axios请求
        1. 获取 cancel函数 且取消axios
        2. 判断 错误是否是取消axios的错误 isCancel(err);
        3. 防止不停点击发送axios的问题。 判断在取消axios就可以了。
    
    
    
    */

  </script>
</body>

</html>